<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示平台</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/font/iconfont.css" media="all">
    <style type="text/css">
        html,body{
            overflow: hidden;
        }
        .top {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-image: linear-gradient(#030B1E, #031E33);
        }
        .title {
            position: absolute;
            left:0;
            top:0;
            width:418px;
            background: url(images/tb.png);
            background-size: 100% 100%;
            height: 60px;
            color:rgb(201,250,255);
            font-family: "微软雅黑";
            font-size: 18px;
            line-height: 50px;
            padding-left: 20px;
            z-index: 666;
        }
        .bg{
            position: absolute;
            left: 418px;;
            top:0;
            width:253px;
            height: 60px;
            background: url(images/tb1.png);
            background-size: 100% 100%;
            z-index: 666;
        }
        .divIcon{
            color:rgb(10,247,247);
            position: absolute;
            right: 20px;
            top:0;
        }
        .divIcon>span{
            float:right;
            line-height: 60px;
        }
        .divIcon1{

        }

        .divMenu {
            position: absolute;
            top: 60px;
            bottom: 0px;
            right: -250px;
            width: 240px;
            z-index: 999;
            background-image: linear-gradient(#062335, #030B1E);
            border-left: 1px solid #03374D;
            box-shadow: -1px 0px 10px #03374D;
            color:#00E4FD;
            overflow-y: auto;
        }

        .menuTitle{
            padding:0 20px;
            line-height: 50px;
            cursor: pointer;
        }
        .menuTitle:hover{
            color:#fff;
        }

        .menuUl {
            padding: 5px 0;
            line-height: 40px;
            background: rgb(3, 14, 33);
        }
        .menuUl>li{
            padding-left: 45px;
            padding-right: 10px;
            cursor: pointer;
        }
        .menuUl>li:hover{
            background: #062335;
            color:#fff;
        }

    </style>
</head>
<body>
    <div class="top">
        <div class="title">
            自然资源和规划建设局公园城市建设信息展示平台
        </div>
        <div class="bg"></div>

        <div class="divIcon divIcon1">
            <span class="iconfont" style="font-size: 20px;margin-left:10px;cursor: pointer">&#xe61e;</span>
            <span class="iconfont" style="font-size: 14px;vertical-align:middle;cursor: pointer">Admin</span>
            <span class="iconfont" style="font-size: 26px;margin-left:10px;cursor: pointer">&#xe64b;</span>
            <!--<span id="time" style="margin-left: 5px;line-height: 55px; "></span>-->
            <span id="date"></span>
            <div style="clear:both"></div>
        </div>
    </div>



    <div style="position: absolute;top:60px;left:0;right:0;bottom:0;">
        <iframe id="iframe" src="home.html" style="border-width:0px;width:100%;height:100%;"></iframe>
    </div>

</body>
<script src="assets/layui/layui.js"></script>
<script src="js/common.js"></script>
<script>
    layui.config({
        base: 'js/'
    })
    var $;
    var menuBl=false;
    layui.use(['jquery','form','validate','common'], function () {
        var form = layui.form,
                layer = layui.layer,
                validate = layui.validate,
                common = layui.common;
        $ = layui.jquery;

        getTime();
        setInterval(function () {
            getTime();
        }, 1000)

        function getTime() {
            var date = new Date().Format("dd/MM/yyyy");
            var time = new Date().Format("HH:mm:ss");
//            var html1=getNum(date,12);
            var html2 = getNum(time, 16);
            $("#time").html(date);
            $("#date").html(html2);
        }


    })



    function homeCk() {
        $("#iframe").attr("src", "home.html");
    }
    
    function getNum(str,font){
        var str = String(str);
        var arr=str.split('');
        var num='';
        for(var i=0;i<arr.length;i++) {
            switch (arr[i]) {
                case '1':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe697;</i>';
                    break;
                case '2':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe698;</i>';
                    break;
                case '3':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe699;</i>';
                    break;
                case '4':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69a;</i>';
                    break;
                case '5':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69b;</i>';
                    break;
                case '6':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69c;</i>';
                    break;
                case '7':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69d;</i>';
                    break;
                case '8':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69e;</i>';
                    break;
                case '9':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe69f;</i>';
                    break;
                case '0':
                    num += '<i class="iconfont" style="font-size: ' + font + 'px">&#xe696;</i>';
                    break;
                default:
                    num += arr[i];
                    break;
            }
        }
        return num;
    }

</script>
</html>